
import React, {
    Component,
    StyleSheet,
    Modal,
    View,
} from 'react-native';

class PopOption extends Component{
	constructor(props) {
	  super(props);
	  this.state = {
  		visible:this.props.visible,
	  };
	}

	render(){
		return(
			<Modal
	      animated={true}
	      transparent={true}
	      visible={this.state.visible}
	      onRequestClose={() => {this._setModalVisible(false)}}>
	      <View  ref='modalContainer' style={styles.modalContainer}
	          onStartShouldSetResponderCapture={(e) => {
	　　　　　　　　const target = e.nativeEvent.target;
	　　　　　　　　if (target === React.findNodeHandle(this.refs.modalContainer)) {
	　　　　　　　　　　this.setState({visible:false});
									 this.props.onClose();
	　　　　　　　　}
	          }}>
	         {this.props.renderOptions()}
	      </View>
    	</Modal>
		)
	}
}

const styles = StyleSheet.create({
	modalContainer:{
    flex: 1,
    backgroundColor:'rgba(0, 0, 0, 0.5)',
    justifyContent:'flex-end',
  },
})

module.exports = PopOption;

